<template>
	<view class=" trading all bgf2" :style="{ 'padding-top': statusBarHeight + 'px' }">
		<!--  tab-->
		<searchHead goback='gobackF'  title='机构抢筹' searchTip='searchimg'></searchHead>
		<view class='dynamicBox bgff'>
			<view class=" content">
				<view class="Recharge fo30_wbold">
					<view class="table_list">
						<view class="thead">
							<view class="fo28_w500 tr sp_be  ">
								<view>名称</view>
								<view>代码</view>
								<view>涨幅</view>
								<view>现价</view>
							</view>
						</view>
						<view class="tbody">
							
							<view class="tr sp_be fo28_wbol" v-for="(item,index) in upData" :key="index">
								<view class="col_sp_be" @click="toInfo(item)">
									<text class="fo30_w500">{{item.N}}</text>
								</view>
								<view class="lh74 "  style="color: #000000;">{{item.C}}</view>
								<view class="lh74 ">{{item.ZF}}%</view>
								<view class="lh74 ">{{item.P}}</view>
							</view>
					
						</view>
						<view class="tfoot fo26_w400 c999999" @click="addMore(1)">加载更多</view>
					</view>
					
				</view>
				<view class="Recharge fo30_wbold" v-if="tabIndex==1">
					<view class="table_list">
						<view class="thead">
							<view class="fo28_w500 tr sp_be  ">
								<view>名称</view>
								<view>代码</view>
								<view>跌幅</view>
								<view>现价</view>
							</view>
					
						</view>
						<view class="tbody">
							
							<view class="tr sp_be fo28_wbol" v-for="(item,index) in downData" :key="index" >
								<view class="col_sp_be" @click="toInfo(item)">
									<text class="fo30_w500">{{item.N}}</text>
								</view>
								<view class="lh74"  style="color: #000000;">{{item.C}}</view>
								<view class="lh74"  style="color: #3ca509;">{{item.ZF}}%</view>
								<view class="lh74"  style="color: #3ca509;">{{item.P}}</view>												
							</view>
					
						</view>
						<view class="tfoot fo26_w400 c999999" @click="addMore(2)">加载更多</view>
					</view>
					
				</view>
<!-- 				<view class="Recharge fo30_wbold" v-if="tabIndex==2">
						<view class="table_list">
							<view class="thead">
								<view class="fo28_w500 tr sp_be  ">
									<view>名称</view>
									<view>代码</view>
									<view>振幅</view>
									<view>现价</view>
								</view>
						
							</view>
							<view class="tbody">
								<view class="tr sp_be fo28_wbol"  v-for="(item,index) in columnList.amplitude.list" :key="index" >
									<view class="col_sp_be" @click="toInfo(item)">
										<text class="fo30_w500">{{item.name}}</text>
									</view>
									<view class="lh74 "  style="color: #000000;">{{item.code}}</view>
									<view class="lh74 ">{{item.Increase}}%</view>
									<view class="lh74 ">{{item.price}}</view>	
						
								</view>
							</view>
							<view class="tfoot fo26_w400 c999999" @click="addMore(3)">加载更多</view>
						</view>
						
				</view>
				<view class="Recharge fo30_wbold" v-if="tabIndex==3">
					<view class="table_list">
						<view class="thead">
							<view class="fo28_w500 tr sp_be  ">
								<view>名称</view>
								<view>代码</view>
								<view>换手</view>
								<view>现价</view>
							</view>
					
						</view>
						<view class="tbody">
							<view class="tr sp_be fo28_wbol"  v-for="(item,index) in columnList.turnover.list" :key="index" >
								<view class="col_sp_be" @click="toInfo(item)">
									<text class="fo30_w500">{{item.name}}</text>
								</view>
								<view class="lh74 "  style="color: #000000;">{{item.code}}</view>
								<view class="lh74 ">{{item.Increase}}%</view>
								<view class="lh74 ">{{item.price}}</view>	
					
							</view>
					
						</view>
						<view class="tfoot fo26_w400 c999999" @click="addMore(4)">加载更多</view>
					</view>
					
				</view>
 -->
			</view>
		</view>

	</view>
	</view>
</template>

<script>
	import searchHead from "@/component/searchHead/searchHead.vue"
	export default {
		components: {
			searchHead,
		},
		data() {
			return {
				statusBarHeight:getApp().globalData.statusBarHeight,//状态栏高度
				tabIndex: 2,
				upData: [],
				downData: [],
				columnList:{'industry':{
						title:'热门行业',
						open:true,
						list:[]
					},
					'concepts':{
						title:'热门概念',
						open:true,
						list:[]
					}
				},
				page_1: 1,
				page_2: 1,
				page_3: 1,
				page_4: 1,
			};
		},
		methods: {
			changeTab(index) {
				this.tabIndex = index
			},
			// 新增
			toInfo: function(data) {
				uni.navigateTo({
					url: "/pages/gzQiYe/sharesInfo?name=" + data.N + "&code=" + data.FS,
				})
			},
			toInfo_n: function(data) {
				uni.navigateTo({
					url: "/pages/gzQiYe/sharesInfo?name=" + data.name + "&code=" + data.scode,
				})
			},
			//获取涨幅榜
			getSharesList_up: function() {
				this.$Request.post(this.$api.index.getSharesListFlag, {
					flag: 2,
					page: this.page_1,
				}).then(res => {
					let that = this;
					res.data.forEach(function(item, index) {
						that.upData.push(item);
					})
							
				})
			},
			getSharesList_down: function() {
				this.$Request.post(this.$api.index.getSharesListFlag, {
					flag: 1,
					page: this.page_2,
				}).then(res => {
					let that = this;
					res.data.forEach(function(item, index) {
						that.downData.push(item);
					})
							
				})
			},	
/* 			getListHostData_industry: function(){
				this.$Request.get(this.$api.index.po_gethotlist).then(res => {
					this.columnList.industry.list = res.data.industry
				})
			},
			getListHostData_concepts: function(){
				this.$Request.get(this.$api.index.po_gethotlist).then(res => {
					this.columnList.concepts.list = res.data.concepts
				})
			}, */
			addMore(e) {
				if(e == 1){
					this.page_1 = this.page_1 + 1;
					this.getSharesList_up()
				}
				
				if(e == 2){
					this.page_2 = this.page_2 + 1;
					this.getSharesList_down()
				}
				
/* 				if(e == 3){
					this.page_3 = this.page_3 + 1;
					this.getListHostData_industry()
				}
				
				if(e == 4){
					this.page_4 = this.page_4 + 1;
					this.getListHostData_concepts()
				} */
			}
		},
		onLoad(e) {
			this.tabIndex = e.c
		},
		onShow() {
			this.getSharesList_up()
			this.getSharesList_down()
/* 			this.getListHostData_industry()
			this.getListHostData_concepts() */
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		background-color: #FFFFFF;
	}
	.trading{
		.dynamicTab{
			height: 80rpx;
			padding: 18rpx 0rpx 24rpx;
			margin-bottom: 20rpx;
			.tabItem {
				flex: 0 1 20%;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				line-height: 64rpx;
				background: #F5F5F5;
			
				&.active {
					color: #E23232;
					position: relative;
					border: 1px solid #FF0000;
					border-radius: 4px;
			
					
				}
			
			}
		}
		.table_list {
				width: 100%;
				background-color: #FFFFFF;
				position: relative;
		
				.thead {
		
					.tr {
						border-bottom: 1rpx solid #EDEDED;
						color: #666666;
						padding: 29rpx 28rpx 31rpx 31rpx;
						width: 100%;
		
						view:nth-child(1) {
							text-align: start;
						}
		
						view {
							flex: 0 1 25%;
							text-align: end;
						}
					}
				}
		
				.tbody {
					width: 100%;
					min-height: calc(100vh - 446rpx);
		
					.tr {
						border-bottom: 1rpx solid #EDEDED;
						padding: 18rpx 29rpx 16rpx 34rpx;
						width: 100%;
						height: 110rpx;
		
						.C999999 {
		
							color: #999999;
						}
		
						view:nth-child(1) {
							text-align: start;
						}
		
						view {
							height: 100%;
							flex: 0 1 25%;
							text-align: end;
		
						}
		
						.lh74 {
		
							line-height: 74rpx;
						}
					}
				}
		
				.tfoot {
					height: 110rpx;
					line-height: 110rpx;
					text-align: center;
				}
			}
		
		
	}
</style>
